<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatile" content="ie=edge">
        <title>红包雨</title>
        <link rel="stylesheet" type="text/css" href="css/18style.css"/>
    </head>
    <body>
        <div class="content">
            <div class="yudi" ></div>
        </div>
    </body>
    <script src="./js/jquery-3.4.1.min.js"></script><!--引入jQuery-->
    <script>
        let $content =$('.content');
        let initNumber = 0;
        for(let i=0; i<30; i++) //生成红包
        {
            let lefts = (Math.floor(Math.random()*5+2));
            let delay = (Math.floor(Math.random()*50+2));
            initNumber+=lefts;
            let $div = $('<div/>').addClass('yudi').css({
                "left":`${initNumber}%`,
                "top":`${lefts}%`,
                "animation-delay":`${delay/10}s`
            });
            $content.append($div);
        }
    </script>
</html>
